<template>
	<!-- 图片验证码 -->
	<u-modal title="验证码" :show="show" closeOnClickOverlay showCancelButton @cancel="onCancel" @confirm="onConfirm">
		<view class="">
			<u-image :showLoading="true" v-if="codeUrl!=''" :src="codeUrl" width="100%" height="60px"
				@click="getImageCode"></u-image>
			<u-input v-model="vCode" placeholder="请输入图片验证码" border="none" shape="circle" type="text">
			</u-input>
		</view>
	</u-modal>
</template>

<script>
	export default {
		name: "imageCode",
		data() {
			return {
				codeUrl: '', //验证码图片地址
				vCode: '', //验证码
				imageData: ''//图片接口返回数据
			};
		},
		props: {
			// 是否弹出窗口
			show: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			show(n) {
				if (n) {
					this.getImageCode()
				}
			}
		},
		methods: {
			// 获取图片验证码
			getImageCode() {
				this.$u.api.account.getImage().then((res) => {
					if (res.data.captchaOnOff) {
						this.codeUrl = "data:image/gif;base64," + res.data.img;
						this.imageData = res.data;
						this.$emit('imageData', res.data)
					}
				}).catch(() => {})
			},
			// 取消
			onCancel() {
				this.vCode = ''
				this.$emit('cancel')
			},
			// 确认
			onConfirm() {
				this.$emit('setCode', this.vCode)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-input--circle {
		height: 48px;
		line-height: 48px;
		background-color: #F5F5F5;
		padding: 0 11px 0 15px !important;
	}
</style>
